import React from 'react';
import {
    Button,
    Text,
    View,
    Image,
    StyleSheet,
    Dimensions,
    StatusBar,
    ActivityIndicator,
    FlatList,
    ScrollView,
    RefreshControl,
    Animated,
    TouchableHighlight,
    SectionList,
    TouchableOpacity,
    Modal, DeviceEventEmitter
} from 'react-native';
import Swiper from 'react-native-swiper';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import AsyncStorage from '@react-native-community/async-storage';
const { width, height } = Dimensions.get('window');
import Styles from './Styles';

import app from '../../../app.json';
import Ugame from '../../../Ugame';
import Httpc from "../../utils/Httpc";
import REQUEST from "../../../REQUEST";
import Football from "../../utils/Football";
import Utils from "../../utils/Utils";

export default class Guanzhu extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            toastModelVisible: false,
            message: '',
            page: 0,
            rows: 10,
            total: 0,
            totalpage: 1,
            lists: [],
            loaded: true,
            refreshing: false,

        };

    }
    static navigationOptions = {
        title: '我的关注',
        //header: null,  //隐藏顶部导航栏
        //tabBarVisible: false, // 隐藏底部导航栏
        headerStyle: {
            backgroundColor: '#d0162e',
            paddingTop: 18,
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
   
        },
    }
    componentDidMount() {
        this.getServerData(() => { });

    }
    getServerData(callback) {
        let _this = this;
        let params = {};
        let { type, days, page, rows, lists } = this.state;
        if (page == 1) {
            lists = [];
        }
        params.token = Ugame.info.Token;
        params.page = page + 1;
        params.rows = rows;
        Httpc.get(REQUEST.GetMyFollowFans, params, (res)=> {
            console.log(res);
            if (res.StatusCode == -2) {
                Ugame.clearInfo();
                this.props.navigation.navigate('Login');
                return;
            }
            if (res.StatusCode == 1) {
                if (res.Data.rows.length > 0) {
                    _this.setState({
                        page: page + 1,
                        total: res.Data.total,
                        totalpage: res.Data.totalpage,
                        lists: lists.concat(res.Data.rows),
                    });
                    callback();
                }
            }

        })
    }
    _onRefresh = () => {
        if (this.state.refreshing) {
            return;
        }
        this.setState({ refreshing: true });
        let _this = this;
        let params = {};
        let { rows } = this.state;
        params.token = Ugame.info.Token;
        params.page = 1;
        params.rows = rows;
        Httpc.get(REQUEST.GetMyFollowFans, params,(res)=> {
            if (res.StatusCode == -2) {
                Ugame.clearInfo();
                this.props.navigation.navigate('Login');
                return;
            }
            if (res.StatusCode == 1) {
                if (res.Data.rows.length > 0) {
                    _this.setState({
                        page: 1,
                        rows: rows,
                        total: res.Data.total,
                        totalpage: res.Data.totalpage,
                        lists: res.Data.rows,
                    });
                }
            }
            _this.setState({ refreshing: false });
        })
    }
    _onEndReached() {
        this.getServerData(() => { });
    }
    _separator() {
        return <View style={{ height: 0.5, backgroundColor: '#ededed' }} />;
    }
    _on_GetUserGodsDetail = (item) => {
        this.props.navigation.navigate('UserDetailed', {
            user: {
                nick:item.nick,
                head_img:item.head_img,
                userid:item.ConID

            }
        });

    }
    _on_FollowConcern = (item,index) => {
        let { lists } = this.state;
        let url = null;
        if (item.isFrind == 1) {
            url = REQUEST.DelFollowConcern;
        } else {
            url = REQUEST.AddFollowConcern;
        }
        let params = {
            token: Ugame.info.Token,
            userid: item.ConID
        }
        Httpc.get(url, params, (res) => {
            this.do_toast(res.Message, 1000, () => {
            });
            if (res.StatusCode == 1) {
                item.isFrind = item.isFrind == 1 ? 0 : 1;
                lists[index]=item;
                this.setState({
                    lists: lists
                })
            }
        });

    }
    _createNewsItem = ({ item,index }) => {
        let { type } = this.state;
        item.head_img = require('../../image/js_img_user_head.png');
        if (!!item.Head) {
            item.head_img = { uri: 'data:image/png;base64,' + item.Head };
        }
        let head_css = { width: 40, height: 40, borderRadius: 40 };
        var myreg = /^[1][0-9][0-9]{9}$/;
        return (

            <View style={Styles.recommend_lists}>
                <TouchableOpacity onPress={() => this._on_GetUserGodsDetail(item)}>
                    <View style={{ flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center', }}>
                        <View style={{ marginLeft: 10 }}><Image resizeMode="cover" style={head_css} source={item.head_img} /></View>
                        <View>
                            <Text style={{ color: '#333333', marginLeft: 10 }}>{myreg.test(item.nick) ? Utils.plusXing(item.nick, 3, 6) : item.nick}</Text>
                            <Text style={{ color: '#969696', marginLeft: 10, fontSize: 12 }}>粉丝：{item.FansNum}</Text>
                        </View>
                    </View>
                </TouchableOpacity>

                <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                    <TouchableOpacity onPress={() => this._on_FollowConcern(item,index)}>                    
                        <Text style={{ color: '#969696', borderRadius: 5, borderWidth: 0.5, borderColor: '#969696', fontSize: 12, paddingTop: 5, paddingBottom: 5, paddingLeft: 10, paddingRight: 10 }}>
                        {item.isFrind == 0 ?"+ 关注":"已关注"}
                        </Text>
                    </TouchableOpacity>
                </View>
            </View>

        );
    }
    do_toast = (str, time, func) => {
        this.setState({
            message: str,
            toastModelVisible: true
        });
        setTimeout(() => {
            this.setState({
                message: '',
                toastModelVisible: false
            });
            func();
        }, time);
    }
    toast = () => {
        return (
            <Modal
                animationType="fade"
                transparent={true}
                visible={this.state.toastModelVisible}
                onRequestClose={() => {
                    this.setState({
                        toastModelVisible: false
                    });
                }}
            >
                <View style={{ flexDirection: 'row', justifyContent: 'center', position: 'absolute', bottom: 100, width: width }}>
                    <Text style={{ backgroundColor: 'rgba(0,0,0,0.7)', color: '#ffffff', borderRadius: 10, height: 40, lineHeight: 40, paddingLeft: 20, paddingRight: 20 }}>{this.state.message}</Text>
                </View>
            </Modal>
        );
    }
    render() {
        let { lists } = this.state;
        console.log(lists);

        return (
            <View style={Styles.container}>
                <StatusBar translucent={true} backgroundColor="transparent" />

                <FlatList
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={this._onRefresh}
                        />
                    }
                    data={lists}
                    keyExtractor={(item, index) => index.toString()}
                    renderItem={this._createNewsItem}
                    onEndReached={this._onEndReached.bind(this)}
                    onEndReachedThreshold={0}
                    ItemSeparatorComponent={this._separator}
                />
                {this.toast()}
            </View>
        )
    }
}

